<template>
    <view class="flex flex-col justify-items-center items-center">
        <image class="w-[200rpx] h-[200rpx]" src="/static/logo.png" @click="titleUpdate" />
        <view class="text-area mt-[40rpx]">
            <text class="title text-zhu_color bg-yellow-200">{{ title }}</text>
        </view>
        <view>
            <button @click="counterTwo.incrementTwo" type="warn">{{counterTwo.countTwo}}  add</button>
            <text>{{showNum}} ---- {{useCount}}</text>
            <view class="text-area shadow-lg p-6 rounded-lg bg-gray-50 ">
                <button @click="counterStore.increment" type="primary">{{counterStore.count}}</button>
                <text class="title text-red-500" @click="titleUpdate">{{title}}</text>
            </view>
            <view v-for="(item,key) in creativeList" :key="key">
                <text class="text-[#996654]">{{item.name}}</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
	import { onShow } from '@dcloudio/uni-app'
    import { ref } from 'vue'
    const title = ref('Hello');

	import { useCounterStore,useCounterTwo } from '../../store'
	const counterStore = useCounterStore();
	const counterTwo = useCounterTwo();

	
	const creativeList = ref([
		{
			name:1
		},{
			name:1
		},{
			name:1
		}
	])
	
	onShow(()=>{
		console.log('onShow');
	})
	
	const titleUpdate = ()=> {
		title.value = String(Date.now());
		creativeList.value[parseInt(String(Math.random() * creativeList.value.length))] = {
			name: Math.random() * 100
		}
	};
</script>